<template>
	<!-- 内容区域 -->
	<view class="content-wrapper">
		<!-- 收货地址分组 -->
		<text class="shdz">收货地址</text>
		<uv-form ref="uForm" label-width="150rpx" :model="form" :rules="rules" class="form">
			<uv-form-item label="收货人" prop="linkMan" borderBottom>
				<uv-input v-model="form.linkMan" clearable focus border="none" placeholder="请输入收货人"></uv-input>
			</uv-form-item>
			<uv-form-item label="手机号码" prop="mobile" borderBottom>
				<uv-input v-model="form.mobile" type="number" border="none" clearable placeholder="请输入手机号码"></uv-input>
			</uv-form-item>
			<uv-form-item label="所在地区" prop="selectedAddress" @click="open" borderBottom>
				<!-- 左侧内容容器 -->
				<view class="right-content">
					<!-- 地址显示区域（包含已选地址和提示文本） -->
					<view class="address-container">
						<view class="address-display" v-if="form.selectedAddress">
							{{ form.selectedAddress }}
						</view>
						<view class="address-placeholder" v-else>
							请选择
						</view>
					</view>
					<!-- 图标放在右侧 -->
					<uv-icon name="arrow-right" class="right-icon"></uv-icon>
				</view>
				<!-- 地址选择器 -->
				<uv-picker ref="picker" :columns="addressList" :loading="loading" keyName="name" @change="change"
					@confirm="confirm">
				</uv-picker>
			</uv-form-item>
			<uv-form-item label="详细地址" prop="address">
				<uv-input v-model="form.address" type="textarea" border="none" :auto-height="true" clearable
					placeholder="请输入详细地址"></uv-input>
			</uv-form-item>
		</uv-form>
	</view>
	<!-- 设置默认地址 -->
	<uv-checkbox v-model="form.isDefault" shape="circle" active-color="rgb(87, 176, 171)" size="20" class="mrdz">
		设为默认地址
	</uv-checkbox>
	<!-- 底部按钮 -->
	<view class="btn">
		<uv-button color="#3aafa9 " type="primary" text="保存地址" @click="goNextPage"></uv-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: { //表单数据
					id: '',
					linkMan: "", //联系人
					mobile: "", //手机号码
					address: "", //详细地址
					isDefault: true, //是否默认
					districtId: '', // 地区ID（用于表单验证）
					selectedAddress: '' // 已选择的地址文本（用于显示）
				},
				provinces: [], //省
				citys: [], //市
				areas: [], //区
				pickerValue: [0, 0, 0], // 选择器默认索引
				defaultValue: [], // 默认地区ID（如有需要）
				loading: true, // 加载状态
				// 表单验证
				rules: {
					linkMan: [{
						required: true,
						message: '联系人不能为空',
						trigger: ['change', 'blur'],
					}],
					mobile: [{
							required: true,
							message: '手机号码不能为空',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明，注意这里面的逻辑不能出现语法报错，否则可能导致不验证
							validator: (rule, value, callback) => {
								console.log(rule, value, callback)
								// 此处业务逻辑省略
								// 这块写判断是否是手机号,这个就百度一下下
								const phoneRegex = /^1[3-9]\d{9}$/; // 中国手机号格式：以1开头，第二位为3-9，后续9位数字
								return phoneRegex.test(value);
								// 返回true表校验通过，返回false表示不通过
							},
							message: '电话号码格式错误',
							trigger: ['blur']
						}
					],
					selectedAddress: [{
						required: true,
						message: '所在地区不能为空',
						trigger: ['change', 'blur'],
					}],
					address: [{
						required: true,
						message: '详细地址不能为空',
						trigger: ['change', 'blur'],
					}]
				},
			}
		},
		// created() {
		// 	this.getData();
		// },
		computed: {
			addressList() {
				return [this.provinces, this.citys, this.areas];
			}
		},
		methods: {
			// getData() {
			// 	uni.request({
			// 		method: 'GET',
			// 		url: '/static/json/shengfen.json',
			// 		success: res => {
			// 			const {
			// 				statusCode,
			// 				data
			// 			} = res
			// 			if (statusCode === 200) {
			// 				console.log('获取的数据：', res);
			// 				this.provinces = data.sort((left, right) => (Number(left.code) > Number(right
			// 					.code) ? 1 : -1));
			// 				console.log(this.provinces)
			// 				this.handlePickValueDefault()
			// 				setTimeout(() => {
			// 					this.loading = false
			// 				}, 200)
			// 			}
			// 		}
			// 	})
			// },
			handlePickValueDefault() {
				// 避免未定义报错，先判断数据是否存在
				if (!this.provinces.length) return;
				// 设置省
				this.pickerValue[0] = this.provinces.findIndex(item => Number(item.id) === this.defaultValue[0]) || 0;
				// 设置市
				this.citys = this.provinces[this.pickerValue[0]]?.children || [];
				this.pickerValue[1] = this.citys.findIndex(item => Number(item.id) === this.defaultValue[1]) || 0;
				// 设置区
				this.areas = this.citys[this.pickerValue[1]]?.children || [];
				this.pickerValue[2] = this.areas.findIndex(item => Number(item.id) === this.defaultValue[2]) || 0;
				// 重置选择器位置
				this.$refs.picker?.setIndexs([this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]], true);
			},

			change(e) {
				if (this.loading) return;
				const {
					columnIndex,
					index,
					indexs
				} = e
				// 改变了省
				if (columnIndex === 0) {
					this.citys = this.provinces[index]?.children || []
					this.areas = this.citys[0]?.children || []
					this.$refs.picker.setIndexs([index, 0, 0], true)
				} else if (columnIndex === 1) {
					this.areas = this.citys[index]?.children || []
					this.$refs.picker.setIndexs(indexs, true)
				}
			},
			open() {
				this.$refs.picker.open();
				this.handlePickValueDefault()
			},

			// 表单提交前验证
			goNextPage() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// 验证通过，执行下一步
						console.log('地址信息：', this.form);
					}
				});
			},
			confirm(e) {
				// e.value 就是控制台打印的地址数据（省、市、区数组）
				const [province, city, area] = e.value; // 解构出省、市、区
				console.log('控制台打印的地址数据：', province, city, area); // 原控制台打印

				// 拼接地址文本（例如："北京市/北京市/朝阳区"）
				const addressText = `${province.name}/${city.name}/${area.name}`;

				// 赋值给数据字段，用于页面显示
				this.form.selectedAddress = addressText;
			},

		},

	}
</script>

<style lang="scss" scoped>
	/* 内容区域卡片 */
	.content-wrapper {
		background-color: #ffffff;
		margin-top: 20rpx;
		padding: 30rpx;
	}

	/* 收货地址分组标题 */
	.shdz {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
	}

	.form {
		padding: 10rpx;
	}

	.mrdz {
		padding: 15rpx;
	}

	/* 右侧内容容器：使用 Flex 布局，图标靠右 */
	.right-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	/* 地址显示区域：占据剩余空间 */
	.address-container {
		flex: 1;
		min-height: 40rpx;
		/* 确保有足够高度点击 */
	}

	/* 已选地址和提示文本样式 */
	.address-display,
	.address-placeholder {
		font-size: 28rpx;
		padding: 5rpx 0;
	}

	.address-display {
		color: #333;
	}

	.address-placeholder {
		color: #999;
	}

	/* 右侧图标样式 */
	.right-icon {
		margin-left: 15rpx;
		color: #999;
		font-size: 24rpx;
	}

	/* 调整选择器触发区域（覆盖整个右侧内容） */
	.uv-picker {
		position: absolute;
		top: 0;
		left: 150rpx;
		/* 与 label-width 保持一致 */
		right: 0;
		bottom: 0;
		opacity: 0;
		/* 透明但可点击 */
		z-index: 1;
	}

	/* 底部按钮区域 */
	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: px2vw(15);
		border-radius: 20%;

		uv-button {
			width: 100%;
			height: px2vw(80);
			border-radius: 20%;
		}
	}
</style>